<template>
    <div class="app-container">
        <el-form :model="queryParams" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="姓名" prop="nickName">
                <el-input v-model="queryParams.nickName" placeholder="请输入员工姓名" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="账号" prop="userName">
                <el-input v-model="queryParams.userName" placeholder="请输入员工账号" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="手机号" prop="phonenumber">
                <el-input v-model="queryParams.phonenumber" placeholder="请输入员工手机号" clearable
                    @keyup.enter.native="handleQuery" onkeyup="this.value=this.value.replace(/[^0-9.]/g,'')"/>
            </el-form-item>
            <el-form-item label="入职时间">
                <el-date-picker v-model="queryParams.startTime" value-format="timestamp"
                    :picker-options="startDatePicker" type="date" placeholder="开始时间" style="width: 180px">
                </el-date-picker>
                <el-date-picker v-model="queryParams.endTime" value-format="timestamp" :picker-options="endDatePicker"
                    type="date" placeholder="结束时间" style="width: 180px">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery(queryParams)">搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <!-- v-if="this.quanxian == false" -->
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-if="this.quanxian == false">新增</el-button>
            </el-col>
        </el-row>
        <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="id" align="center" prop="userid" />
            <el-table-column label="姓名" align="center" prop="nickName" />
            <el-table-column label="账号" align="center" prop="userName" />
            <el-table-column label="联系方式" align="center" prop="phonenumber" />
            <el-table-column label="入职时间" align="center" prop="createTime">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime, '{YY}-{MM}-{DD}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="账号类型" align="center" prop="remark" type="text"></el-table-column>
            <!-- <el-table-column label="住址" align="center" prop="sAddress" /> -->
            <el-table-column label="账号状态" align="center" prop="status">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == '0'">开启</span>
                    <span v-if="scope.row.status == '1'">关闭</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <!-- v-hasPermi="['system:user:edit']" -->
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改
                    </el-button>
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handlelook(scope.row)">查看
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        <!-- 新增对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="close">
            <el-form ref="form" :model="form" :rules="rules" label-width="150px">
                <el-form-item label="员工姓名" prop="nickName" style="width: 320px;">
                    <el-input v-model.trim="form.nickName" placeholder="请输入员工姓名" />
                </el-form-item>
                <el-form-item label="员工账号" prop="userName" style="width: 320px;">
                    <el-input v-model.trim="form.userName" placeholder="请输入员工账号" />
                </el-form-item>
                <el-form-item label="联系方式" prop="phonenumber" style="width: 320px;">
                    <el-input maxlength="11" v-model.trim="form.phonenumber" placeholder="请输入手机号码" />
                </el-form-item>
                <el-form-item label="密码" prop="password" style="width: 320px;">
                    <el-input v-model.trim="form.password" placeholder="请输入密码" />
                </el-form-item>
                <!-- <el-form-item label="员工住址" prop="sAddress" style="width: 320px;">
                    <el-input v-model.trim="form.sAddress" placeholder="请输入住址" />
                </el-form-item> -->
                <el-form-item label="账号状态" style="width: 320px;">
                    <el-radio-group v-model="form.status">
                        <el-radio v-for="dict in status" :key="dict.value" :label="dict.value">
                            {{ dict.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" :disabled="lock" @click="xinzeng">确 定</el-button>
                <el-button @click="cancel1">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 修改对话框 -->
        <el-dialog :title="title2" :visible.sync="open2" width="800px" append-to-body @close="close">
            <el-form ref="form" :model="form" :rules="rules" label-width="150px">
                <el-form-item label="员工姓名" prop="nickName" style="width: 320px;">
                    <el-input v-model.trim="form.nickName" placeholder="请输入员工姓名" />
                </el-form-item>
                <el-form-item label="员工账号" prop="userName" style="width: 320px;">
                    <el-input v-model.trim="form.userName" placeholder="请输入员工账号" :disabled="true" />
                </el-form-item>
                <el-form-item label="联系方式" prop="phonenumber" style="width: 320px;">
                    <el-input maxlength="11" v-model.trim="form.phonenumber" placeholder="请输入手机号码" />
                </el-form-item>
                <el-form-item label="密码" prop="password" style="width: 320px;">
                    <el-input v-model.trim="form.password" placeholder="请输入密码" />
                </el-form-item>
                <!-- <el-form-item label="员工住址" prop="sAddress" style="width: 320px;">
                    <el-input v-model.trim="form.sAddress" placeholder="请输入住址" />
                </el-form-item> -->
                <el-form-item label="账号状态" style="width: 320px;">
                    <el-radio-group v-model="form.status">
                        <el-radio v-for="dict in status" :key="dict.value" :label="dict.value">
                            {{ dict.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" :disabled="lock1" @click="submit">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 查看对话框 -->
        <el-dialog :title="title1" :visible.sync="open1" width="800px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="150px" :disabled="edit">
                <el-form-item label="员工姓名" prop="nickName" style="width: 320px;">
                    <el-input v-model.trim="form.nickName" placeholder="请输入员工姓名" />
                </el-form-item>
                <el-form-item label="员工账号" prop="userName" style="width: 320px;">
                    <el-input v-model.trim="form.userName" placeholder="请输入员工账号" />
                </el-form-item>
                <el-form-item label="联系方式" prop="phonenumber" style="width: 320px;">
                    <el-input maxlength="11" v-model.trim="form.phonenumber" placeholder="请输入手机号码" />
                </el-form-item>
                <el-form-item label="密码" prop="password" style="width: 320px;">
                    <el-input v-model.trim="form.password" placeholder="请输入密码" />
                </el-form-item>
                <!-- <el-form-item label="员工住址" prop="sAddress" style="width: 320px;">
                    <el-input v-model.trim="form.sAddress" placeholder="请输入住址" />
                </el-form-item> -->
                <el-form-item label="账号状态" style="width: 320px;">
                    <el-radio-group v-model="form.status">
                        <el-radio v-for="dict in status" :key="dict.value" :label="dict.value">
                            {{ dict.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { selectAllSusers, selectAllshopUsers, insertShopUsers, getUser, updateShopSysUser } from "@/api/business/userlist.js";
import { checkPermi } from "@/utils/permission.js";
export default {
    name:'shopUser',
    data() {
        return {
            lock:false,
            lock1:false,
            edit: true,
            quanxian: false,
            queryParams: {
                shopid: this.$route.query.shopid,
                nickName: '',
                userName: '',
                phonenumber: '',
                startTime: '',
                endTime: '',
                pageNum: 1,
                pageSize: 10
            },
            // 显示搜索条件
            showSearch: true,
            total: 0,
            open: false,
            open1: false,
            open2: false,
            title: '',
            title1: '',
            title2: '',
            // 员工列表信息
            userList: [],
            // 遮罩层
            loading: true,
            // 员工状态
            status: [{
                value: '0',
                label: '正常'
            }, {
                value: '1',
                label: '停用'
            }],
            form: {
                shopid: this.$route.query.shopid,
                userName: '',
                nickName: '',
                phonenumber: '',
                password: '',
                sAddress: '',
                status: '0',
                userid: ''
            },
            rules: {
                nickName: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
                userName: [{ required: true, message: "用户账号不能为空", trigger: "blur" },
                { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{3,}$/, message: '员工账号为数字加字母大于3位', trigger: 'blur' }],
                phonenumber: [{ required: true, message: "联系方式不能为空", trigger: "blur" },
                { pattern: /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
                password: [{required: true, pattern: /^[0-9a-zA-Z]{6,10}$/, message: '密码长度为数字加字母6到10位', trigger: 'blur' }],
                // sAddress: [{ required: true, message: "地址不能为空", trigger: "blur" }]
            },
            date: {
                userid: '',
            },
            startDatePicker: this.beginDate(),
            endDatePicker: this.processDate(),
        }
    },
    created() {
        this.getList();
        this.quanxian = checkPermi(['shangjia'])
    },
    methods: {
        reset() {
            this.form = {
                shopid: this.$route.query.shopid,
                userName: null,
                nickName: null,
                phonenumber: null,
                password: null,
                sAddress: null,
                status: '0',
                userid: null
            },
                this.resetForm("form");
        },
        close() {
            this.form = {
                shopid: this.$route.query.shopid,
                userName: null,
                nickName: null,
                phonenumber: null,
                password: null,
                sAddress: null,
                status: '0',
                userid: null
            }
        },
        // 获取员工列表
        async getList() {
            this.loading = true;
            let res = await selectAllSusers({
                shopid: this.$route.query.shopid
            });
            if (res.code == 200) {
                this.userList = res.data.data;
                this.loading = false;
                if(res.data.data!=undefined){
                    this.total = res.data.data.length;
                }
            }
        },
        // 搜索按钮操作
        handleQuery(queryParams) {
            if (this.queryParams.startTime == '' && this.queryParams.endTime == "") {
                selectAllshopUsers(queryParams).then(response => {
                    let that = this;
                    that.userList = response.data.data;
                    that.total = response.data.data.length;
                })
            } else if (this.queryParams.startTime == "" && this.queryParams.endTime != '') {
                this.$modal.msgError("请输入开始时间");
            } else if (this.queryParams.startTime != '' && this.queryParams.endTime == '') {
                this.$modal.msgError("请输入结束时间");
            } else if (this.queryParams.startTime != '' && this.queryParams.endTime != '' && this.queryParams.startTime > this.queryParams.endTime) {
                this.$modal.msgError("结束时间必须大于开始时间");
            }else if ( this.queryParams.startTime == this.queryParams.endTime) {
                this.$modal.msgError("结束时间必须大于开始时间");
            } else if (this.queryParams.startTime != '' && this.queryParams.endTime != '' && this.queryParams.startTime < this.queryParams.endTime) {
                selectAllshopUsers(queryParams).then(response => {
                    let that = this;
                    that.userList = response.data.data;
                    that.total = response.data.data.length;
                })
            }

        },
        // 重置按钮操作
        resetQuery() {
            this.queryParams = {
                shopid: this.$route.query.shopid,
                nickName: '',
                userName: '',
                phonenumber: '',
                startTime: '',
                endTime: '',
                pageNum: 1,
                pageSize: 10
            },
                this.getList();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            for (let i = 0; i < selection.length; i++) {
                selection.shopid = selection[i].shopid
            }
            this.searchdata.shopid = selection.shopid
        },
        // 新增本店员工
        handleAdd() {
            this.open = true;
            this.title = "新增员工";
        },
        // 新增员工提交
        xinzeng() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.lock=true;
                    insertShopUsers(this.form).then(response => {
                        if (response.data.code == 200) {
                            this.lock=false;
                            this.open = false;
                            this.getList();
                            this.form = {
                                userName: '',
                                nickName: '',
                                phonenumber: '',
                                password: '',
                                sAddress: '',
                                status: '0',
                                userid: ''
                            },
                                this.$modal.msgSuccess(response.data.msg);
                        } else {
                            this.lock=false;
                            this.$modal.msgError(response.data.msg);
                        }
                    })
                }
            })
        },
        cancel() {
            this.open2 = false;
            this.reset();
        },
        cancel1() {
            this.open = false;
            this.reset();
        },
        // 修改
        handleUpdate(row) {
            this.date.userid = row.userid;
            this.open2 = true;
            this.title2 = "修改员工"
            getUser(this.date).then(response => {
                if (response.data.code == 200) {
                    this.form = response.data.data;
                }
            })
        },
        submit() {
            // this.form.phonenumber = '';
            // this.form.userName = '';
            this.lock1=true;
            updateShopSysUser(this.form).then(response => {
                if (response.data.code == 200) {
                    this.lock1=false;
                    this.$modal.msgSuccess(response.data.msg)
                    this.open2 = false;
                    this.getList();
                    this.form = {
                        userName: '',
                        nickName: '',
                        phonenumber: '',
                        password: '',
                        sAddress: '',
                        status: '0',
                    }
                }else{
                    this.lock1=false;
                    this.$modal.msgError(response.data.msg);
                }
            })
        },
        // 查看
        handlelook(row) {
            this.date.userid = row.userid;
            this.open1 = true;
            this.title1 = "查看员工"
            getUser(this.date).then(response => {
                if (response.data.code == 200) {
                    this.form = response.data.data;
                }
            });
        },
        beginDate() {
            const self = this;
            return {
                disabledDate(time) {
                    //           debugger;
                    if (self.endTime) {
                        //如果结束时间不为空，则小于结束时间
                        return new Date(self.endTime).getTime() < time.getTime();
                    } else {
                        return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                },
            };
        },
        processDate() {
            const self = this;
            return {
                disabledDate(time) {
                    if (self.startTime) {
                        //如果开始时间不为空，则结束时间大于开始时间
                        return new Date(self.startTime).getTime() > time.getTime();
                    } else {
                        return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                },
            };
        },
    }
}
</script>